{extend name="$admin_layout" /}

{block name="style"}
<link rel="stylesheet" type="text/css" href="__STATIC__/dsc/main.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/dsc/iconfont.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/dsc/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/dsc/order-new.css?v=2">
{/block}

{block name="content"}
 <!-- 引入vue -->
 <script src="/static/plugins/vue/vue.min.js"></script>
 <script src="/static/plugins/element-ui/element-ui.js"></script>
 <link rel="stylesheet" href="/static/plugins/element-ui/element-ui.css">
<style type="text/css">
    .select-list {
        width:150px;
        height:150px;
        /*overflow: hidden;*/
        overflow:scroll;
    }
    .select-container {
        display: none;
    }
    .select2 {
        width: 140px !important;
    }
</style>
<div class="warpper">
    <div class="title">{:lang('商品')} - {:lang('商品批量导出')}</div>
    <div class="content">
        <div class="tabs_info">
            <ul>
                <li ><a href="goods_batch">{:lang('商品批量修改')}</a></li>
<!--                <li><a href="/admin.php/goods/index/goodsimport">{:lang('商品批量上传')}</a></li>-->
                <li class="curr"><a href="goods_derive_all">{:lang('商品批量导出')}</a></li>
                <li><a href="goods_auto_grounding">{:lang('批量自动上下架')}</a></li>
            </ul>
        </div>
        <div class="explanation" id="explanation">
            <div class="ex_tit"><i class="sc_icon"></i><h4>{:lang('操作提示')}</h4><span id="explanationZoom" title="{:lang('收起提示')}"></span></div>
            <ul>
                <li>{:lang('根据分类')}、{:lang('品牌或者货号搜索商品')}，{:lang('在选择的商品列表中选中需要导出的商品')}。</li>

            </ul>
        </div>
        <div class="flexilist">
            <div class="common-content">
                <!-- <form name="theForm" method="post" action="goods_batch.php?act=edit" onsubmit="return getGoodsIDs()"> -->
                    <div class="step" ectype="filter" data-filter="goods">
                        <div class="step_content">
                            <div id="category_brand_screen">
                                <form action="goods_derive_all" method="get" id="search_form" class="marBtm" style="padding:10px;">
                                <div class="goods_search_div">
                                    <div class="goods_search_div">
                                        <div class=" " style="display: flex;align-items: center">
                                            <span class="txt"  style="width: 100px;">{:lang('所属分类')}：</span>
                                            <!-- <select name="cid" id="category" class="form-control select2 custom-css" style="width: 200px;" >
                                            {volist name="category" id="cate"}
                                                <option value="{$key}" {if strval($key) === strval($map['cid'])}selected{/if}>{neq name="key" value="0"}{$cate|raw}{else /}{:lang('全部分类')}{/neq}</option>
                                            {/volist}
                                            </select> -->
                                            <div id="app" style="margin-right: 10px;">
                                                <input type="hidden" name="cid" v-model='goods_cid' id="category">
                                                <el-cascader
                                                size='small'
                                                style="width:260px"
                                                :options="goodsOptions"
                                                v-model='goods_cid_list'
                                                :props="{ checkStrictly: true,
                                                value:'id',
                                                label:'name',
                                                children:'children'}"
                                                clearable
                                                @change='goodsOptionsChange'
                                                ref="cascaderHandle" 
                                                :show-all-levels="false" 
                                                filterable></el-cascader>
                                            </div>
                                            <a href="javascript:void(0);" class="btn btn30" ectype="search" id="serach_button"><i class="icon icon-search"></i>{:lang('搜索')}</a>
                                        </div>
                                    </div>
                                    
                                </div>
                                </form>
                                <!-- 主题 -->
                                <div class="move_div">
                                    <form action="goods_derive_all_download" method="post" class="marBtm" style="" id="goods_batch_edit">
                                    <div class="move_left">
                                        <h4>{:lang('待选列表')}</h4>
                                        <div class="move_info" style="width: 1325.453125px !important;">
                                            <div class="move_list ps-container ps-active-y" style="overflow:scroll;" id="left_check">
                                                <ul >

                                                    {volist name="data_list" id="g"}
                                                    <li  data-value="" data-text="" class="current" style="display: flex;justify-content: flex-start; align-items: center;">
                                                        <input type="checkbox" value="{$g.id}" name="category[]" style="margin-right: 8px;"> 
                                                        <a href="javascript:void(0);">{$g.name}<em>¥</em>{$g.shop_price}</a></li>
                                                    {/volist}
                                                    
                                                </ul>                                        
                                            </div>
                                        </div>
                                        <div class="move_handle">
                                            <a href="javascript:void(0);" class="btn btn25 moveAll" ectype="moveAll" id="check_all_left">{:lang('全选')}</a>
                                            <!-- <a href="javascript:void(0);" class="btn btn25 red_btn" ectype="sub" data-operation="add_edit_goods"
                                            onclick="leftSure()">{:lang('确定')}</a> -->
                                            <a class="btn btn25 red_btn" href="javascript:void(0);" ectype="sub" onclick="goods_batch()">{:lang('确认导出')}</a>
                                        </div>
                                    </div>
                                    </form>
                                    <div class="move_middle">
                                        <div class="move_point" data-operation="add_edit_goods"></div>
                                    </div>

                                </div>
                            </div>
                            




                            <div class="move_buttom_div pt30 tc">
                                <input type="hidden" name="goods_ids" value="">
                            </div>
                        </div>
                    </div>
                <!-- </form> -->
            </div>
        </div>
    </div>
</div>
    
  <script type="text/javascript">

    function leftSure(){
        // console.log($("input[name='category']:checked").html())
        var arr=[]; 
        // console.log(aa);
        var cb_checked = $("#left_check input[name='category[]']:checked");
        var str = '';
        $.each(cb_checked,function(){
            str += `<li data-value="" data-text="" class="current" style="display: flex;justify-content: flex-start;" >${$(this).parent().html()}</li>`
            var id_tag = ($(this).parent().html());
            // console.log(id_tag);
        });
        // $("input[name='category']:checked").each(function(){ 
        //     arr.push($(this).next().html()); 
        // }) 
        // 
        // console.log(str);
        if(str.length > 0){
            $("#right_div").html(str)
        }
        
    }
    
    function rightSure(){
        $("#right_check input[name='category[]']:checked ").each(function(index, el) {
                $(el).parent().remove();
            });
    }
        
    $('#check_all_left').on("click",function(){
        var checked = $(this).text();
        if(checked == '全选'){
            $("#left_check input[name='category[]']").each(function(index, el) {
                $(el).prop("checked",true);
            });
            $(this).html('全不选');
        }else{
            $("#left_check input[name='category[]']").each(function(index, el) {
                $(el).prop("checked",false);
            });
            $(this).html('全选');
        }    

    });

    $('#check_all_right').on("click",function(){
        var checked = $(this).text();
        if(checked == '全选'){
            $("#right_check input[name='category[]']").each(function(index, el) {
                $(el).prop("checked",true);
            });
            $(this).html('全不选');
        }else{
            $("#right_check input[name='category[]']").each(function(index, el) {
                $(el).prop("checked",false);
            });
            $(this).html('全选');
        }    

    });

    $('#serach_button').on("click",function(){
        $("#search_form").submit();
    });
    
    function goods_batch(){
        $checked = $("#goods_batch_edit input[name='category[]']:checked ");
        if($checked.length >0){
            $("#goods_batch_edit").submit();
        }else{
            alert("请先选择数据！！！");
        }
        
    }
    new Vue({
      el: '#app',
      data: function() {
        return {
			goods_cid_list:[], // 商品分类id的多级信息
			goods_cid:'',  //商品分类id
            goodsOptions:[], // 商品分类
            timer:null, // 定时器
        }
    },
    mounted() {
        this.getGoodsOptions()
		  let cid =this.getQueryVariable('cid')
		  console.log(cid)
		  if(cid){
			this.goods_cid =cid
          }
          	  // 点击文字即选中
		this.timer =  setInterval(function() {
　　　　　　document.querySelectorAll(".el-cascader-node__label").forEach(el => {
　　　　　　　　el.onclick = function() {
　　　　　　　　　　if (this.previousElementSibling) this.previousElementSibling.click();
　　　　　　　　};
　　　　　　});
　　　　}, 1000);
    },
    destroyed(){
		clearInterval(this.timer)
	  },
    methods: {
    
		  	// 处理cid在三级联动的位置,
			  getCidList(val,id){
						let cid_list =[]
						val.forEach((item,index)=>{
							if(item.id ==id){
								cid_list = [item.id]
								return false
							}else{
								if(item.children){
									let newCid_list =[item.id]
									let list = nodefun(item.children,id,newCid_list)
									if(list) {
										cid_list =list
									}
								}
							}
						})
						// 递归函数
						function nodefun(newVal,newId,newCid_list){
							let flag =false
							newVal.forEach(j=>{
								// console.log(j)
								if(j.id == newId){
									newCid_list.push(j.id)
									flag =true
								}else{
									if(j.children){
										let	cid_list = JSON.parse(JSON.stringify(newCid_list))
										cid_list.push(j.id)
										let list =  nodefun(j.children,newId,cid_list)
										if(list){
											newCid_list =list 
											flag =true
										}
									}

								}
							})
							if(flag){
								return	newCid_list						
							}
						}
						return	cid_list
			},
		 getQueryVariable(variable){
			var query = window.location.search.substring(1);
			var vars = query.split("&");
			for (var i=0;i<vars.length;i++) {
					var pair = vars[i].split("=");
					if(pair[0] == variable){return pair[1];}
				}
				return(false);
			},

		  // 获取分类接口数据
		getGoodsOptions(){
			let that =this
			$.get("/admin.php/goods/category/getcategorylist",function(data,status){
			   if(data.code == 1){
				console.log('获取商品分类',data.data)
				that.goodsOptions =data.data
				// 递归获取cid的位置
				if(that.goods_cid){
					that.goods_cid_list = 	that.getCidList(that.goodsOptions,that.goods_cid)
				}
			   }else{
				  that.$message({
						message: data.msg,
						type: 'warning'
					});
			   }
			
			})
		},
		// 商品分类选择改变时
		goodsOptionsChange(e){
			if(this.goods_cid_list.length>0){
				this.goods_cid = this.goods_cid_list[this.goods_cid_list.length-1]
			}else{
				this.goods_cid =''
			}
            // this.$refs.cascaderHandle.dropDownVisible = false; //监听值发生变化就关闭它
            // 监听是否为最后一级，如果为最后一级，面板收起
			var children = this.$refs.cascaderHandle.getCheckedNodes();
          if(children[0].children.length < 1){   //判断有没有下级
            this.$refs.cascaderHandle.dropDownVisible = false; //监听值发生变化就关闭它
		  }
			console.log(e,this.goods_cid)
        },
    }
})
</script>


{/block}